<template>
  <div>
    <main class="main">
      <div class="subject">
        <div class="navLeft"></div>
        <div class="navRight">
          <div class="loopType">
            <currentHeader :headerTitle="'回路状态'"></currentHeader>
            <div class="chart">
              <div class="rightPieBgk"></div>
              <div class="rightPie">
                <Pie :pieNum="pieNum"
                     ref="pie"></Pie>
              </div>
              <div class="rightChartMessage">
                <div class="onLineBox">
                  <img src="../../assets/img/lightUp/three.png"
                       alt=""
                       class="onLineIcon" />
                  <span class="onLineText">在线</span>
                </div>
                <div class="offLineBox">
                  <img src="../../assets/img/lightUp/commonOne.png"
                       alt=""
                       class="offLineIcon" />
                  <span class="offLineText">离线</span>
                </div>
              </div>
            </div>
          </div>
          <div class="loopOpen">
            <currentHeader :headerTitle="'回路开启状态'"></currentHeader>
            <!-- 折线图 -->
            <div class="lineChart"
                 ref="lineChart"></div>
          </div>
          <div class="controlMethod">
            <div class="centerTop general">
              <div class="topText">灯控策略</div>
              <div class="controlMethodInfo">
                <span class="infoText">详情</span>
                <div class="img">
                </div>
              </div>
            </div>
            <div class="controlMethodList">
              <div class="addControl">
                <!-- <img src="../../assets/img/lightUp/校园物联-智能照明-灯控策略-新增图标.png" alt="" class="settingIcon"> -->
                <div class="settingIcon"></div>
                <div class="addText">新增灯控策略</div>
              </div>
              <div class="onceControlInfo"
                   v-for="item in controlStrategyList"
                   :key="item.id">
                <div class="onceControlInfoText">
                  <span>{{ item.strategyName }}</span>
                  <span>{{ item.section }}</span>
                </div>
                <div>{{ item.type }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="lightUpRight">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import {
  getControlStrategyList,
  getLoopstate,
  getOffline,
} from '../../api/modules/LightingRequest/light'
import currentHeader from '../../components/CurrentHeader.vue'
import Pie from '../../components/pie.vue'

const route = useRoute()

/* 饼图 */
const pie = ref() // 获取饼图实例
const pieNum = ref({
  // 饼图数据
  pieOffline: 20,
  pieOnline: 80,
})
const offLineNumber = ref<Object>({}) // 离线数量
const getLoopstateList = async () => {
  const entityCode = route.params.entityCode || ''
  const entityType = route.params.entityType || ''
  const equipTypeCodes = route.params.equipTypeCodes || ''
  const res = await getLoopstate({
    entityCode,
    entityType,
    equipTypeCodes,
  })
  if (res.data.code === '0') {
    let onlineList = ''
    res.data.data.data.forEach((el: any) => {
      pieNum.value.pieOnline += el.online.split(',').length
      onlineList += el.online + ','
    })
    getOfflineNum(onlineList, 'online')
  }
}
const getOfflineNum = async (tagnames: any, startSign: string) => {
  // 获取离线个数 请求
  const res = await getOffline({
    tagnames: JSON.stringify(tagnames),
    startSign: JSON.stringify(startSign),
  })
  if (res.data.code === '0') {
    offLineNumber.value = res.data.data

    for (let key in res.data.data) {
      // 获取饼图离线总数
      pieNum.value.pieOffline += res.data.data[key]
    }
    pie.value.open() // 生成饼图
  }
}
/* 平滑折线图 */
const lineChart = ref<any>(null)
const initLineChart = () => {
  const myLineChart = echarts.init(lineChart.value, 'dark')
  lineChartOption && myLineChart.setOption(lineChartOption)
}
const lineChartOption = {
  color: ['#FFBF00'],
  title: {
    text: '单位：小时',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['2月', '4月', '6月', '8月', '10月', '12月'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 3,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#FFBE21',
          },
          {
            offset: 1,
            color: '#000000',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [42, 61, 82, 50, 40, 91],
    },
  ],
}
/* 灯控策略列表 */
const controlStrategyList = ref<Array<any>>([])
const getControlStrategy = async () => {
  const res = await getControlStrategyList({})
  if (res.data.code === '0') {
    controlStrategyList.value = res.data.data
  }
}
onMounted(() => {
  initLineChart() // 初始化 折线图
  getControlStrategy() // 灯控策略请求
  getLoopstateList() // 饼图请求
})
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;
  background-color: #0e293d;
}
.subject {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.centerTop {
  width: 300px;
  height: 32px;
  background: linear-gradient(
    90deg,
    rgba(90, 255, 255, 0.06) 0%,
    rgba(90, 255, 255, 0.67) 52%,
    rgba(90, 255, 255, 0.19) 100%
  );
  opacity: 1;
  background-image: url(../../assets//img/lightUp//currentTitle.png);
  overflow: hidden;
}
.topText {
  height: 16px;
  font-size: 16px;
  font-family: Microsoft;
  font-weight: 700;
  color: #ffffff;
  line-height: 16px;
  letter-spacing: 2px;
  margin: 13px 0 3px 38px;
}

.navRight {
  width: 300px;
  height: 884px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.loopType {
  width: 300px;
  height: 180px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
}
.rightPieBgk {
  width: 151px;
  height: 87px;
  opacity: 1;
  // border: 2px solid;
  // border-image: linear-gradient(180deg, rgba(90.00000223517418, 255, 255, 0), rgba(90.00000223517418, 255, 255, 1)) 2 2;
  background-image: url(../../assets/img/lightUp/histogramOne.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-y: 5px;
  position: absolute;
  right: 72px;
  top: 58px;
}
.rightPie {
  width: 240px;
  height: 120px;
  opacity: 1;
  position: absolute;
  top: 37px;
  right: 29px;
}
.rightChartMessage {
  width: 132px;
  height: 20px;
  position: absolute;
  right: 81px;
  top: 156px;
  display: flex;
  justify-content: space-between;
}
.loopOpen {
  width: 300px;
  height: 196px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
}
// 灯控策略模块
.controlMethod {
  width: 300px;
  height: 476px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
}
.general {
  display: flex;
  justify-content: space-between;
}
.controlMethodInfo {
  display: flex;
  align-items: end;
  margin-right: 21px;
  margin-bottom: 4px;
  .img {
    width: 13px;
    height: 13px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    background-image: url(../../assets/img/lightUp/childInfo.png);
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 2px 1px 2px 1px;
    margin-left: 4px;
    // margin: 9px 20px 4px 0;
  }
}
.infoText {
  width: 24px;
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 12px;
  margin: 9px 4px 0 0;
}
.controlMethodList {
  width: 300px;
  box-sizing: border-box;
  padding: 10px;
}
.addControl {
  width: 280px;
  height: 34px;
  background: rgba(90, 255, 255, 0.2);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: 1px solid #5affff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.settingIcon {
  width: 20px;
  height: 20px;
  background-image: url(../../assets/img/lightUp/controlStrategyAdd.png);
}
.addText {
  width: 84px;
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  line-height: 14px;
  margin-left: 8px;
  color: #ffffff;
}
.onceControlInfo {
  width: 280px;
  height: 54px;
  background: linear-gradient(
    90deg,
    #5affff 0%,
    rgba(90, 255, 255, 0) 50%,
    #5affff 100%
  );
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      90deg,
      rgba(90.00000223517418, 255, 255, 1),
      rgba(255, 255, 255, 1),
      rgba(90.00000223517418, 255, 255, 1)
    )
    1 1;
  background-image: url(../../assets/img/lightUp/controlStrategyList.png);
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.onceControlInfo div:last-child {
  width: 28px;
  height: 12px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #5affff;
  line-height: 12px;
}
.onceControlInfoText {
  height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.onceControlInfoText span:first-child {
  height: 12px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
}
.onceControlInfoText span:last-child {
  width: 139px;
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
}

.lineChart {
  height: 148px;
  width: 289px;
}
</style>
